<?php
  $lan = get_lan();
  require_once(LANG.$lan."/search_box.php");
  drupal_add_css(CSS . 'search_box.css',array("type"=>"external"));
?>
<script>
var $;//Drupal will using full namespace jQuery instead of $ , we will back using $ after document ready
//Mouse inside tab
MOUSE_INSIDE=false;//Flag to indicate mouse is inside popup menu or not.
function change_box_value(value)
{
    /*
    *   Function name       Purpose 
    *   change_box_value    Change search box value from other module after document ready 
    *   
    *   Params              Description
    *   value               Value of search box
    */
    jQuery("#location_hotel_id").val(value);
    if (value = "" || value == "<?=$default_search_text?>")
    {
        disable_function();
    }
    else
    {
        jQuery("#submit_btn").removeClass("disabled");
    }
}
function disable_function()
{
    /*
    *   Function name       Purpose
    *   disable_function    Disable all button and clean input field
    */
     jQuery("#catalogues_dropdown").ddslick('destroy');//dummy 
     jQuery("#submit_btn").addClass("disabled");//disable submit button
     jQuery("#location_hotel_id").addClass("entity_field");//Make input box transparent
     //jQuery("#drow_down_trigger").attr("disabled", false);
}
function click_occur(event)
{
    /*
    *   Function name   Purpose
    *   click_occur     Handle input element become click by user
    */
	if (event.currentTarget.value == "" || event.currentTarget.value == "<?=$default_search_text?>")
	{
        /*
            If input box value empty or value is equal to default text
            show continent menu.
        */
		event.preventDefault();
		jQuery(this).val("");
		jQuery("#country_city_tabs").show();
        disable_function();
	}
    else
    {
        jQuery("#location_hotel_id").typeahead('lookup');//Value not empty , show auto complete hints
    }
}
function key_up_occur(event)
{
    /*
    *   Function name   Purpose
    *   key_up_occur    Handle input box value may changed
    */
    disable_function();//Disable all search box function first.
	if (event.currentTarget.value == "")
	{
        //Changed value is empty , show menu.
		event.preventDefault();
        //jQuery(this).val("<?=$default_search_text?>");
		jQuery("#country_city_tabs").show();
        
	}
	else
	{
        //Enable search function.
        jQuery("#location_hotel_id").removeClass("entity_field");
		jQuery("#country_city_tabs").hide();
	}
}
function blur_occur(event)
{
    /*
    *   Function name   Purpose
    *   blur_occur      Handle input box out of focus
    *
    */
	if (!MOUSE_INSIDE)
	{
        //Mouse not in country menu , close the menu
		jQuery("#country_city_tabs").hide();
	}
    if (event.currentTarget.value == "")
	{
        //Reset value to default , if value is empty
		//event.preventDefault();
        jQuery(this).val("<?=$default_search_text?>");
        jQuery("#location_hotel_id").addClass("entity_field");
    }
    
}

function pop_up_filter(v)
{
    /*
    *   Function name   Purpose
    *   pop_up_filter   Event handler trigger after user selected value from autocomplete box.
    */
    if (parseInt(jQuery("#category_filter").val()) == -1 )
    {
        jQuery.ajax({url:"/controller/category_search.php",data:{source:v,lan:"<?=$lan?>"},dataType:"json"}).done(//Query how many entity inside city.
        function(data)
        {
        	$("#drow_down_trigger").attr("disabled", true);
            jQuery("#catalogues_dropdown").ddslick('destroy');
            jQuery("#catalogues_dropdown").ddslick
            ({
                data:data,
                width:jQuery(".search_area").width(),
                onSelected :function(d)
                {
                    //console.log(d);
                    jQuery("#category_filter_vis").html("<img src=\""+d.selectedData.imageSrc+"\">"+d.selectedData.text);
                    jQuery("#category_filter").val(d.selectedData.value);
                }
            }
            );
            jQuery("#catalogues_dropdown").show();
            jQuery("#catalogues_dropdown").ddslick('open');
        }
        )
    }
}
//Asynchronous Query to php
function q(params,on_done)
{
	//Query parameters
	params.lan = "<?=$lan?>";
	var link="/controller/hotel_search.php";
	jQuery.ajax({url:link,data:params,dataType:"json"}).done(on_done).fail(function(e){console.log(e);});
}
jQuery(document).ready
(

function()
{
	$ = jQuery.noConflict();//After this statement , we can use $ to invoke jQuery instead of $.
    //disable_function();	
    jQuery(".country").tooltip();
	jQuery(".country").click(function(e) //On user select country from menu
	{
        e.preventDefault();
        e.stopPropagation();
        //Disable javascript bubble effect
		var local = jQuery(this)[0].id.replace("-",",").replace("_"," ");//the location is stored into element id , it will need replace "-" to "," and "_" to " " .
		jQuery("#location_hotel_id").val(local+","); // Add , to end of location so that php will known it should show all city under country
        jQuery("#location_hotel_id").typeahead('lookup').focus();// Show autocomplete menu
        jQuery("#country_city_tabs").hide();//Hide the continent menu
        //jQuery("#submit_btn").attr("disabled", false);
        //pop_up_filter(local);
	}
	);
    
	jQuery("#country_city_tabs").click(function(e){jQuery("#location_hotel_id").focus();})//Menu click will focus to inputbox . The reason of this behaver is default focus of this element is full document , it is very difficult to determine should us close the menu. 
    
    /*Update flag to indicate mouse is inside menu*/
	jQuery("#country_city_tabs").mouseover(
		function(e)
		{MOUSE_INSIDE=true;
		});
	/*Update flag to indicate mouse is out of menu*/
	jQuery("#country_city_tabs").mouseleave(
		function(e)
		{MOUSE_INSIDE=false;
		});
    /*Register handler to event*/
	jQuery("#location_hotel_id").click(click_occur)
	jQuery("#location_hotel_id").keyup(key_up_occur)
	jQuery("#location_hotel_id").focusout(blur_occur)
	
	
    /*Bootstrap 3 build-in function : https://github.com/bassjobsen/Bootstrap-3-Typeahead*/
	$("#location_hotel_id").typeahead({source: // With source argument , source data will refreshed even time.
	function(query,process)
	{
        q({"src":query,"cate":$("#category_filter").val()},function(src_data)
		{
			//CACHE[query]=src_data;
			process(src_data);//Asynchronous call after query done.
		}
		);
				
	}
	,matcher:function(item){return true;},//Since matching is done on server side , source data is already processed so it alway be true.
	items:6,//Length of item display.
	updater:function(item)//On user select item from autocomplete box.
	{
		//pop_up_filter(item);
		jQuery("#submit_btn").removeClass("disabled");
        jQuery("#location_hotel_id").val(item);
        $('#search_form').unbind('submit');
        jQuery("#search_form").submit();//Submit to php.
		return item;
	}
	})
    //Dummy, ignore here.
	$("#category_drop_down_menu li a").click
	(
		function(e)
		{
			$("#category_filter_vis").html($(this).html());
			$("#category_filter").val($(this).attr("tabindex"));
			
		}
	)
    jQuery(window).resize();//
    jQuery("#country_city_tabs").hide();
    $("#search_form").submit(function(e){e.preventDefault();});

}
);
</script>
<form action="/drupal/result" method="POST" id="search_form"/>
<div class="search_area" id="search_area">
<input type="hidden" name="category_filter" id="category_filter" value="1"/> 
<input type="hidden" name="lan" id="lan_field" value="<?=$lan?>"/> 
<label for="location_hotel_id" class="search_text">
<div class="strong_text" style="font-size:48px;margin-bottom:-12px"><?=$explorer?></div>
<div class="strong_text" ><?=$find?></div>
</label>
<div class="wrap_search_field">
    <div class="input-group input-group-lg">
        <!--
        <div class="input-group-btn ">
          	<button type="button" class="btn btn-default dropdown-toggle disabled" data-toggle="dropdown" id="drow_down_trigger" href="#"><div id="category_filter_vis"><img src="/res/img/landing_home/menu_icon_01.gif"/><span style="vertical-align: middle;"><?=$accomodation?></span></div></button>
  			<ul class="dropdown-menu" id="category_drop_down_menu" >
                <li role="presentation"><a role="menuitem" tabindex="1"><img src="/res/img/landing_home/menu_icon_01.gif"/><?=$accomodation?></a></li>
                <li role="presentation"><a role="menuitem" tabindex="2"><img src="/res/img/landing_home/menu_icon_02.gif"/><?=$transport?></a></li>
                <li role="presentation"><a role="menuitem" tabindex="3"><img src="/res/img/landing_home/menu_icon_03.gif"/><?=$shopping?></a></li>
                <li role="presentation"><a role="menuitem" tabindex="4"><img src="/res/img/landing_home/menu_icon_04.gif"/><?=$attraction?></a></li>
                <li role="presentation"><a role="menuitem" tabindex="5"><img src="/res/img/landing_home/menu_icon_05.gif"/><?=$food_beverage?></a></li>
                <li class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1"><img src="/res/img/landing_home/menu_icon_06.gif"/><?=$all?></a></li>
            </ul>
        </div>
        -->
        <input type="text" id="location_hotel_id" name="location_hotel_name" value="<?=$default_search_text?>" autocomplete="off" class="form-control entity_field"/>
         <span class="input-group-btn">
        <button class="btn btn-default search_btn disabled" id="submit_btn" ></button>
        </span>
        </div>
</div>



<div id="country_city_tabs" class="tab_wrap">
	<ul class="nav nav-pills">
		<?php
			foreach($continents as $ind=>$continent)
			{
		?>
				<li><a href="#<?=str_replace(" ","_",$continent[0])?>" data-toggle="tab"><?=$continent[0]?></a></li>
		<?php
			}
		?>
		
	</ul>
	<div class="tab-content">
	<?php
		foreach($continent_countrys as $continent=>$countrys)
		{
	?>
			<div class="tab-pane fade " id="<?=str_replace(" ","_",$continent)?>">
				<?php
					foreach($countrys as $country)
					{
				?>
					<div id="<?=$continent."-".$country[0]?>" class="country" <?php
                        if (mb_strlen($country[0],"utf-8") >= 5)
                        {
                    ?>
                            data-toggle="tooltip" data-placement="right" title="<?=$country[0]?>"
                    <?php
                        }                        
                    ?>
                    
                    ><?=mb_strlen($country[0],"utf-8") < 5?$country[0]:mb_substr($country[0],0,5,"utf-8")."..."?></div>
				<?php
					}
				?>
                <div class="clearfix"></div>
			</div>
	<?php
		}
	?>
	</div>

</div>
<div id="catalogues_dropdown"></div>
</form>
<div class="clearfix"></div>
</div>